<template>
  <el-card>
    <div class="myItem">
      <div class="myHead">
        <div class="leftpart" v-model="activeName" @click="handleClick">
          <span
            :style="{ 'border-bottom': page1 === 0 ? '1px solid red' : '' }"
            class="first1 part"
            label="新车业务"
            name="first"
            @click="handleFirst(0)"
            >新车业务</span
          >
          <span
            :style="{ 'border-bottom': page1 === 1 ? '1px solid red' : '' }"
            class="second2 part"
            label="售后业务"
            name="second"
            @click="handleFirst(1)"
            >售后业务</span
          >
          <span
            :style="{ 'border-bottom': page1 === 2 ? '1px solid red' : '' }"
            class="third3 part"
            label="二手车业务"
            name="third"
            @click="handleFirst(2)"
            >二手车业务</span
          >
        </div>
        <div class="rightpart">
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 1%"
            @click="handlePage"
            >页面切换练习</el-button
          >
          <el-button
            type="success"
            size="mini"
            style="margin-right: 1%"
            @click="handleTable"
            >table练习</el-button
          >
          <el-button
            type="warning"
            size="mini"
            style="margin-right: 1%"
            @click="handleTesttwo"
            >Testtwo页面练习</el-button
          >
          <el-button
            type="warning"
            size="mini"
            style="margin-right: 1%"
            @click="handletest"
            >页面</el-button
          >
          <el-button
            type="warning"
            size="mini"
            style="margin-right: 1%"
            @click="handleYuyin"
            >语音识别</el-button
          >

          <el-date-picker
            v-model="value1"
            type="year"
            style="width: 100px"
            placeholder="选择年"
            @change="handleChange"
            value-format="yyyy-MM-dd"
            size="mini"
          >
          </el-date-picker>
          <template>
            <el-select
              v-model="value2"
              placeholder="请选择季度"
              @change="handleQuarter"
              size="mini"
              style="width: 100px; margin: 0 1%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
          <template>
            <el-select
              v-model="value3"
              placeholder="请选择月份"
              @change="handleMonth"
              size="mini"
              style="width: 100px"
            >
              <el-option
                v-for="item in month"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </div>
      </div>
      <div>
        <el-input v-model="input1"></el-input>
        <el-input v-model="input2" type="number"></el-input>
        <input type="text" />
        <input type="number" />
      </div>
      <div class="myMain">
        <pageone v-show="page1 === 0 ? true : false"></pageone>
        <pagetwo v-show="page1 === 1 ? true : false"></pagetwo>
        <pagethree v-show="page1 === 2 ? true : false"></pagethree>
      </div>
    </div>
    <el-button @click="handleTabs">点击按钮切换传递参数</el-button>
  </el-card>
</template>

<script>
import pageone from "@/components/pageone.vue";
import pagetwo from "@/components/pagetwo.vue";
import pagethree from "@/components/pagethree.vue";

export default {
  name: "eCharts",
  components: {
    pageone,
    pagetwo,
    pagethree,
  },
  data() {
    return {
      input1: "",
      input2: "",
      activeName: "first",
      value1: new Date(),
      value2: "",
      value3: "",
      options: [
        {
          value: "1",
          label: "第一季度",
        },
        {
          value: "2",
          label: "第二季度",
        },
        {
          value: "3",
          label: "第三季度",
        },
        {
          value: "4",
          label: "第四季度",
        },
      ],
      month1: [
        {
          value: "1月",
          label: "1月",
        },
        {
          value: "2月",
          label: "2月",
        },
        {
          value: "3月",
          label: "3月",
        },
      ],
      month2: [
        {
          value: "4月",
          label: "4月",
        },
        {
          value: "5月",
          label: "5月",
        },
        {
          value: "6月",
          label: "6月",
        },
      ],
      //一个空的变量，用来切换三个页面
      page1: 0,
      //一个空的月份数组，用来切换month1和month2
      month: [],
    };
  },

  mounted() {
    //设置默认值
    // this.drawLine();
    //设置第一项为默认值
    this.value2 = this.options[0].label;
    //将month1给month，设置月份第一项为默认值
    this.month = this.month1;
    this.value3 = this.month[0].label;
  },
  methods: {
    handleYuyin() {
      this.$router.push("/yuyin");
    },
    handleTabs() {
      this.$router.push("/pagetabs");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    handleFirst(item) {
      // console.log("111");
      this.page1 = item;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        // title: { text: ‘在Vue中使用echarts‘ },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
    handleChange(item) {
      console.log("11", item);
    },
    handleQuarter(item) {
      console.log("22", item);
      //根据获取到的数字将month1或month2给month
      if (this.value2 == "1") {
        this.month = this.month1;
      } else {
        this.month = this.month2;
      }
      //将第一项设为默认值
      this.value3 = this.month[0].label;
    },
    handleMonth(item) {
      console.log("33", item);
    },
    handlePage() {
      this.$router.push("/spageone");
    },
    handleTable() {
      this.$router.push("/tablepage");
    },
    handleTesttwo() {
      this.$router.push("/secondpage");
    },
    handletest() {
      this.$router.push("/flexbuju");
      // this.$router.push('/audit');
    },
  },
};
</script>

<style scoped>
.myItem {
}
.myHead {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.leftpart,
.rightpart {
  flex: 1;
}
.leftpart {
}
.rightpart {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.rightpart span {
  width: 200px;
  margin-right: 20px;
}
.el-input,
.el-select {
  width: 20%;
}
.leftpart {
  width: 50%;
}
.rightpart {
}
.part {
  margin: 0 8%;
  padding: 2%;
}

.leftpart span {
  margin: 0 5%;
}
</style>
